import React from "react"
import PropTypes from "prop-types"

// 第二种 因为能简写，所以比较受欢迎
// export default class Admin extends React.Component {
//     constructor(){
//         super()
//         this.state = {
//             count:0,
//             msg:'hello component'
//         }
//         this.handel = ()=>{
//             this.setState({
//                 count:this.state.count + 5
//             })
//         }
//     }
//     render(){
//         return (
//             <div>
//                 <h1>{this.state.count}</h1>
//                 <button onClick = { this.handel }>Admin</button>
//             </div>
//         )
//     }
// }

// 最终版
// ✨ 类接收直接使用this.props
export default class Admin extends React.Component {
    // 😡 类构造器中，无法通过this.props直接获取到props，需要在构造器中接受props，传递给super，
    // 才可以通过this.props获取
    constructor(props) {
        super(props)
        console.log(this.props)
    }
    state = {
        count: 10,
        msg: 'hello component'
    }

    // prop校验
    static propTypes = {
        xxx:PropTypes.array.isRequired
    }

    // props默认值
    static defaultProps = {
        xxx:['傻子','必须要写xxx属性','xxx属性是数组奥']
    }

    handel = () => {
        this.setState({
            count: this.state.count + 20
        })
    }
    render() {
        // 😡 this.props.yyy = 2 // 报错，因为props的数据是只读数据，不可以修改
        // this.props.xxx.push(9)
        // 😡 注意，如果是复杂数据类型，则可以对其修改，而不发生报错(props和const类似)
        return (
            <div>
                {/* 😡 props可以传递任意类型的数据 */}
                {this.props.yyy},
                {this.props.zzz},
                {this.state.count},
                {this.props.ele},
                <this.props.eleType></this.props.eleType>,
                {this.props.eleInstance}
                <button onClick={this.handel}>Admin</button>
                {this.props.x},
                {this.props.y},
                {this.props.z},
                <ul>
                    {this.props.xxx.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })}
                </ul>
            </div>
        )
    }
}
// ✨ 函数接收使用形参的props
// export default function Admin(props){
//     return (
//         <div>
//             test,
//             {props.xxx} ,
//             {props.yyy} ,
//             {props.zzz} ,
//         </div>
//     )
// }
